<template>
     <div class="home-list">
        <div class="hot">
            <span>热门精选</span>
        </div>
        <div class="home">
            <div class="item" v-for="item,index in homeList" :key="index">
             <!-- 放置组件，根据组件来显示 -->
              <homeItemV3 v-if="item.discoveryContentType === 9" :itemData="item.data" @click="detailClick(item.data.houseId)"></homeItemV3> 
              <homeItemV9 v-if="item.discoveryContentType === 3" :itemData="item.data" @click="detailClick(item.data.houseId)"></homeItemV9> 
            </div>
        </div>
     </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import {ref,watch} from 'vue'
import useHomeStore from '../../../stores/modules/homeStore';
import homeItemV3 from '../../../component/homeList/homeListV3.vue'
import homeItemV9 from '../../../component/homeList/homeListV9.vue'

//获取房屋列表数据
const store = useHomeStore();
const { homeList } = storeToRefs(store);
// console.log("homelist:", homeList.value);

//点击页面转到详情页
//当到达搜索标志时弹出搜索框
//点击跳转到详情页
//获取路由
//将houseId拿到然后换到detaiStore里面
import { useRouter } from "vue-router";
import { useDetailstore } from '../../../stores/modules/detailStore'
import { getDatailData} from '../../../services/modules/Detail'
const router = useRouter();
 function detailClick(houseId)
{
    getDatailData(houseId);
   router.push('/detail');
}


</script>

<style lang="less" scoped>

   .hot
   {
      margin-left: 30px;
      margin-top: 20px;
      font-weight: 600;
      font-size: 24px;
   }
 .home
 {
    display: flex;
    flex-wrap: wrap;
    margin-left: 8px;

    .item
    {
        display: flex;
    }
 }

</style>